<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
   
  <meta name="keywords" content="Java Python" />
   
  <meta name="description" content="From Zero to Hero" />
  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>
    GitHub+hexo搭建个人博客 |  朱酱酱的学习博客
  </title>
  <meta name="generator" content="hexo-theme-yilia-plus">
  
  <link rel="shortcut icon" href="/favicon.ico" />
  
  
<link rel="stylesheet" href="/css/style.css">

  
<script src="/js/pace.min.js"></script>


  

  

<link rel="alternate" href="/atom.xml" title="朱酱酱的学习博客" type="application/atom+xml">
</head>

</html>

<body>
  <div id="app">
    <main class="content">
      <section class="outer">
  <article id="post-personal_server/GitHub-hexo-搭建个人博客" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h1 class="article-title sea-center" style="border-left:0" itemprop="name">
  GitHub+hexo搭建个人博客
</h1>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/2020/02/08/personal_server/GitHub-hexo-%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/" class="article-date">
  <time datetime="2020-02-08T08:02:27.000Z" itemprop="datePublished">2020-02-08</time>
</a>
      
      
      
<div class="word_count">
    <span class="post-time">
        <span class="post-meta-item-icon">
            <i class="ri-quill-pen-line"></i>
            <span class="post-meta-item-text"> 字数统计:</span>
            <span class="post-count">2.7k字</span>
        </span>
    </span>

    <span class="post-time">
        &nbsp; | &nbsp;
        <span class="post-meta-item-icon">
            <i class="ri-book-open-line"></i>
            <span class="post-meta-item-text"> 阅读时长≈</span>
            <span class="post-count">9分钟</span>
        </span>
    </span>
</div>

      
    </div>
    

    
    
    <div class="tocbot"></div>





    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <h1 id="GitHub-hexo搭建个人博客详细教程"><a href="#GitHub-hexo搭建个人博客详细教程" class="headerlink" title="GitHub+hexo搭建个人博客详细教程"></a>GitHub+hexo搭建个人博客详细教程</h1><p><img src="https://zhuuu-bucket.oss-cn-beijing.aliyuncs.com/img/20200208160405.png" alt=""></p>
<h2 id="1-前言"><a href="#1-前言" class="headerlink" title="1. 前言"></a>1. 前言</h2><p>​        随着互联网浪潮的翻腾，国内外涌现出越来越多优秀的社交信息分享者，随之优秀的信息分享平台也越来越多，最常见的就是个人博客。GitHub + hexo 是比较受欢迎的一种方式，为什么呢？省钱、简单、快速。如果你也是一个不甘寂寞、喜欢折腾的程序猿（媛），如果你也有过这种想要搭建一个所以自己的博客网站的想法，可以跟着我这篇教程博客一起，它可以让你快速搭建起一个属于自己的个人博客，享受这种从0到1的过程。</p>
<p>朱酱酱的博客 ： <a href="http://zhuuu.work/">链接</a></p>
<a id="more"></a>



<h2 id="2-概念介绍"><a href="#2-概念介绍" class="headerlink" title="2. 概念介绍"></a>2. 概念介绍</h2><h3 id="Hexo"><a href="#Hexo" class="headerlink" title="Hexo"></a>Hexo</h3><p>Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。<br>Hexo是一个基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Heroku上，是搭建博客的首选框架。我这里选的是GitHub。Hexo的作者是台湾的，对中文支持很友好，可以到 Hexo官网 了解更多细节。</p>
<h3 id="GitHub"><a href="#GitHub" class="headerlink" title="GitHub"></a>GitHub</h3><p>GitHub是一个代码托管网站和社交编程网站。这里聚集了世界上各路技术牛叉的大牛，和最优秀的代码库。是全球程序员的天堂。因为是国外的，所以界面全是英文。</p>
<h3 id="GitHub-Pages"><a href="#GitHub-Pages" class="headerlink" title="GitHub Pages"></a>GitHub Pages</h3><p>GitHub Pages是用来托管 GitHub 上静态网页的免费站点。</p>
<h2 id="3-搭建步骤"><a href="#3-搭建步骤" class="headerlink" title="3. 搭建步骤"></a>3. 搭建步骤</h2><ul>
<li>环境搭建<ul>
<li>安装git</li>
<li>安装node.js</li>
<li>安装Hexo</li>
</ul>
</li>
<li>获取个人网站域名</li>
<li>GitHub创建个人仓库</li>
<li>推送网站</li>
<li>绑定域名</li>
<li>主题及个性化设置</li>
<li>发布文章</li>
<li>图床选择</li>
<li>其他</li>
</ul>
<h3 id="环境搭建"><a href="#环境搭建" class="headerlink" title="环境搭建"></a>环境搭建</h3><h4 id="安装git"><a href="#安装git" class="headerlink" title="安装git"></a>安装git</h4><p><a href="https://git-scm.com/downloads" target="_blank" rel="noopener">git下载</a></p>
<p>对应下载自己的电脑系统即可</p>
<p><img src="https://zhuuu-bucket.oss-cn-beijing.aliyuncs.com/img/20200208161128.png" alt=""></p>
<h4 id="安装nodejs"><a href="#安装nodejs" class="headerlink" title="安装nodejs"></a>安装nodejs</h4><p>Hexo基于Node.js，我们需要在本机安装Node.js</p>
<p><a href="https://nodejs.org/en/download/" target="_blank" rel="noopener">nodejs下载</a></p>
<p><img src="https://zhuuu-bucket.oss-cn-beijing.aliyuncs.com/img/20200208161252.png" alt=""></p>
<p>安装完成后需要检查是否正确安装：以下都需要检查</p>
<p>检查Node.js是否安装成功，打开命令窗口，输入 <code>node -v</code></p>
<p>检查npm是否安装成功，在命令窗口输入 <code>npm -v</code></p>
<p><img src="https://zhuuu-bucket.oss-cn-beijing.aliyuncs.com/img/20200208161424.png" alt=""></p>
<h4 id="安装Hexo"><a href="#安装Hexo" class="headerlink" title="安装Hexo"></a>安装Hexo</h4><p>​    hexo就是我们用于搭建个人博客的框架，这个时候我们需要在我们本地文件夹中创建一个用于博客管理的文件夹，我命名为Blog。hexo框架与以后写作发布的网页等都会保存在这个文件夹中，创建好之后进入文件夹，按住shift，然后鼠标右键-在此处打开命令行</p>
<p><img src="https://zhuuu-bucket.oss-cn-beijing.aliyuncs.com/img/20200208161519.png" alt=""></p>
<p>使用npm命令安装Hexo，输入：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g hexo-cli</span><br></pre></td></tr></table></figure>

<p>耐心等待安装完成，完成之后，初始化我们的博客，输入：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo init</span><br></pre></td></tr></table></figure>

<p>注意，这些命令都作用于我们刚刚新建的Blog文件夹中。</p>
<p>此时我们检测一下我们网站的雏形，按顺序输入以下三条命令：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo new hello Hexo    //新建一篇名为"hello Hexo"的博客</span><br><span class="line">hexo g                 //生成静态文件</span><br><span class="line">hexo s                 //本地部署预览</span><br></pre></td></tr></table></figure>

<p>此时，我们的网站已经初步成型，可以输入 <code>localhost:4000</code> 访问。</p>
<p>我的blog修改过配置，和你们新搭建的略有区别。</p>
<h4 id="Hexo-常用命令"><a href="#Hexo-常用命令" class="headerlink" title="Hexo 常用命令"></a>Hexo 常用命令</h4><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo -g //安装Hexo</span><br><span class="line">npm update hexo -g //升级 </span><br><span class="line">hexo init //初始化博客</span><br></pre></td></tr></table></figure>

<p><strong>命令缩写</strong></p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">hexo n "我的博客" = hexo new "我的博客" //新建文章</span><br><span class="line">hexo g = hexo generate //生成</span><br><span class="line">hexo s = hexo server //启动服务预览</span><br><span class="line">hexo d = hexo deploy //部署</span><br></pre></td></tr></table></figure>



<h3 id="推送网站"><a href="#推送网站" class="headerlink" title="推送网站"></a>推送网站</h3><p>​    上面我们只是在本地预览，接下来要做的就是推送网站，也就是发布网站，让我们的网站在互联网上能被访问到。在设置之前，我们先来看看blog根目录里的<strong>_config.yml文件</strong>，是我们的<strong>站点配置文件</strong>，如下图：</p>
<p><img src="https://zhuuu-bucket.oss-cn-beijing.aliyuncs.com/img/20200208161947.png" alt=""></p>
<p>进入根目录的themes文件夹的任意主题目录，也有一个_config.yml文件，这个是主题配置文件，如下图：</p>
<p><img src="https://zhuuu-bucket.oss-cn-beijing.aliyuncs.com/img/20200208162032.png" alt=""></p>
<h4 id="将hexo与gitHub关联"><a href="#将hexo与gitHub关联" class="headerlink" title="将hexo与gitHub关联"></a>将hexo与gitHub关联</h4><p>打开blog根目录下的站点配置配置文件_config.yml，修改成下面的样子并保存</p>
<p><img src="https://zhuuu-bucket.oss-cn-beijing.aliyuncs.com/img/20200208162127.png" alt=""></p>
<p>这一步其实就是给 <code>hexo d</code> 这个部署命令做相应的配置</p>
<p>让hexo知道你要把blog部署到哪，很显然我们是部署到github仓库里。</p>
<p>然后我们要安装git部署插件，输入以下命令：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-deployer-git --save</span><br><span class="line">hexo clean //清理静态文件</span><br><span class="line">hexo g //生成静态文件</span><br><span class="line">hexo d //部署</span><br></pre></td></tr></table></figure>

<p>​    完成后打开浏览器，在地址栏输入你的放置个人网站的仓库路径，即xxxx.github.io，其中xxxx表示我们的用户名。当然这里有个前提，你是按照<strong>用户名</strong>.github.io的形式来命名你的仓库。你就会发现你的博客已经上线了，可以在网络上被访问了。</p>
<h3 id="绑定域名（可选）"><a href="#绑定域名（可选）" class="headerlink" title="绑定域名（可选）"></a>绑定域名（可选）</h3><p>​        虽然在Internet上可以访问我们的网站，但是网址是GitHub提供的:xxxx.github.io， 而我们想使用我们自己的个性化域名，这就需要绑定我们自己的域名。</p>
<p>​        这里演示的是在阿里云万网的域名绑定，在国内主流的域名代理厂商也就阿里云和腾讯云。登录到阿里云，进入管理控制台的域名列表，找到你的个性化域名，进入解析</p>
<p><img src="https://zhuuu-bucket.oss-cn-beijing.aliyuncs.com/img/20200208162443.png" alt=""></p>
<p>  然后添加解析：如图选择解析就好</p>
<p><img src="https://zhuuu-bucket.oss-cn-beijing.aliyuncs.com/img/20200208162610.png" alt=""></p>
<p>​    包括添加三条解析记录，ip是你的GitHub的地址，你也可以ping你的 xxxx.github.io 的ip地址，填入进去。第三个记录类型是CNAME，CNAME的记录值是：你的用户名.github.io这里千万别弄错了。</p>
<p>第二步：登陆你的github，在对应仓库的settings中把你在阿里云买的域名写上</p>
<p><img src="https://zhuuu-bucket.oss-cn-beijing.aliyuncs.com/img/20200208162845.png" alt=""></p>
<p><img src="https://zhuuu-bucket.oss-cn-beijing.aliyuncs.com/img/20200208162912.png" alt=""></p>
<p>点击save保存。</p>
<p>第三步：</p>
<p>​        第三步，进入本地博客文件夹 ，进入blog/source目录下，创建一个记事本文件，输入你的域名，对，只要写进你自己的域名即可。如果带有www，那么以后访问的时候必须带有www完整的域名才可以访问，但如果不带有www，以后访问的时候带不带www都可以访问。所以建议，不要带有www：</p>
<p>​    <img src="https://zhuuu-bucket.oss-cn-beijing.aliyuncs.com/img/20200208163015.png" alt=""></p>
<p><img src="https://zhuuu-bucket.oss-cn-beijing.aliyuncs.com/img/20200208163036.png" alt=""></p>
<p>​    完成这三步，进入blog目录中，按住shift键右击打开命令行，依次输入：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo clean</span><br><span class="line">hexo g</span><br><span class="line">hexo d</span><br></pre></td></tr></table></figure>

<p>​    这时候打开浏览器在地址栏输入你的个性化域名将会直接进入你自己搭建的网站。</p>
<h3 id="主题和个性化设置"><a href="#主题和个性化设置" class="headerlink" title="主题和个性化设置"></a>主题和个性化设置</h3><h4 id="更换主题"><a href="#更换主题" class="headerlink" title="更换主题"></a>更换主题</h4><p>​    如果你不喜欢Hexo默认的主题，可以更换不同的主题，</p>
<p>​    主题传送门：<a href="https://link.zhihu.com/?target=https%3A//hexo.io/themes/">Themes</a> </p>
<p>​    个人使用的主题:<a href="https://github.com/Shen-Yu/hexo-theme-ayer" target="_blank" rel="noopener">传送门</a></p>
<p>​    附送一款热度最高的主题next:<a href="https://github.com/theme-next/hexo-theme-next" target="_blank" rel="noopener">传送门</a></p>
<p>​    我自己使用的是ayer主题，可以在blog目录中的themes文件夹中查看你自己主题是什么。现在把默认主题更改成ayer主题，在blog目录中（就是命令行的位置处于blog目录）打开命令行输入：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git clone https://github.com/Shen-Yu/hexo-theme-ayer.git themes/ayer</span><br></pre></td></tr></table></figure>

<p>​    打开<strong>站点</strong>的_config.yml配置文件，修改主题为ayer:</p>
<p><img src="https://zhuuu-bucket.oss-cn-beijing.aliyuncs.com/img/20200208163433.png" alt=""></p>
<h3 id="图床选择"><a href="#图床选择" class="headerlink" title="图床选择"></a>图床选择</h3><p>​    我使用的markdown编辑器是Typora，这款编辑器插入图片需要绝对路径或者相对路径</p>
<p>​    因为图片放在github上会加载不出来，所以使用了阿里云OSS和PicGO配合使用</p>
<h4 id="PicGo"><a href="#PicGo" class="headerlink" title="PicGo"></a>PicGo</h4><p>​    这款软件是国人做的，非常好用的一款上传图片到云端的软件</p>
<p>​    <a href="https://github.com/Molunerfinn/PicGo" target="_blank" rel="noopener">PicGo下载链接</a></p>
<p><img src="https://zhuuu-bucket.oss-cn-beijing.aliyuncs.com/img/20200208163804.png" alt=""></p>
<p>配置如下图：</p>
<p><img src="https://zhuuu-bucket.oss-cn-beijing.aliyuncs.com/img/20200208163841.png" alt=""></p>
<p>上图的key和secret是阿里云oss的配置；接下来将进行介绍</p>
<h4 id="阿里云OSS"><a href="#阿里云OSS" class="headerlink" title="阿里云OSS"></a>阿里云OSS</h4><p>​    关于图床，免费的图床有很多，但是免费的图床总会有很多问题，例如图片链接经常会失效等。</p>
<p>建议还是花点钱弄个付费的，也不贵。我选择的是 阿里云OSS ，很便宜，九块钱一年，超出按留流量收费。</p>
<p>另外还有一款超级好用的图床上传工具：PicGo ，真的是十分好用了。</p>
<p>当然还有很多其他好用的图床，阿里云和腾讯云都差不多，SM.MS 等也还可以，总之我觉得收费的省心一些，当然你也可以说：“我不要你觉得，我要我觉得”，哈哈。</p>
<p><a href="https://oss.console.aliyun.com/overview" target="_blank" rel="noopener">阿里云OSS</a></p>
<p><img src="https://zhuuu-bucket.oss-cn-beijing.aliyuncs.com/img/20200208164117.png" alt=""></p>
<p>首先去购买 <a href="https://oss.console.aliyun.com/overview" target="_blank" rel="noopener">阿里云OSS</a></p>
<p>然后按照下图创建bucket:</p>
<p><img src="https://zhuuu-bucket.oss-cn-beijing.aliyuncs.com/img/20200208164319.png" alt=""></p>
<p>如果上述情况有不懂的地方，可以参照下面这个链接，很详细的</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https:&#x2F;&#x2F;blog.csdn.net&#x2F;qq_40241957&#x2F;article&#x2F;details&#x2F;89490282</span><br></pre></td></tr></table></figure>



<h3 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h3><p>其他</p>
<p>我踩过的坑</p>
<p>​    1、域名买.top的就可以，土豪请随意</p>
<p>​    2、修改配置文件，很容易搞错路径，因为这个站点内同名的文件在很多路径下都有，例如_config.yml</p>
<p>​    3、如果安装hexo过程中或者之前有报错，建议你重装。一旦出错了，基本就是你的操作问题了，而且很难发现、解决，解决错误的时间可以重装很多次了</p>
<p>​    4、域名的绑定，关于添加解析，很容易出错！！有的博主说是三条，有的博主说是只需要一条，就是不要A记录的解析，保留一个CNAME的解析，我是添加了三条的，如果你遇到什么问题，可以试试只保留CNAME，百度一下解决方案</p>
<h3 id="Tips"><a href="#Tips" class="headerlink" title="Tips"></a>Tips</h3><ol>
<li>个性固然好，但是在设置的时候一定要细心，这些都是要打开代码文件去修改的，如果本机装有IDEA，最好用它来编辑，没装的话IDEA的话，VSCODE也行</li>
<li>图床选择要谨慎，建议选择知名图床，有很小的图床经常会失效，另外图片文件一定要在本地留有备份<br>个性化可以让你的博客看起来高大上许多，但最重要的还是我们持续的价值输出，坚持写博客才是真理，不要忘记我们搭建博客的初心（当我知道很多小伙伴和我一样，就是喜欢折腾，哈哈）</li>
<li>博客的源文件，也可以托管到github上，特别是博文对应得md文件，一定别弄丢了，整个站点文件都托管的话，可以多台电脑去管理你的博客</li>
<li>国内访问GitHub得速度不理想，可以将博客同时部署到GitHub和coding，提高国内访问速度</li>
</ol>
<h2 id="到这里恭喜你成功的搭建好了自己的博客！！！"><a href="#到这里恭喜你成功的搭建好了自己的博客！！！" class="headerlink" title="到这里恭喜你成功的搭建好了自己的博客！！！"></a>到这里恭喜你成功的搭建好了自己的博客！！！</h2>
      
      <!-- reward -->
      
      <div id="reward-btn">
        打赏
      </div>
      
    </div>
      <!-- copyright -->
      
        <div class="declare">
          <ul class="post-copyright">
            <li>
              <i class="ri-copyright-line"></i>
              <strong>版权声明： </strong s>
              本博客所有文章除特别声明外，均采用 <a href="https://www.apache.org/licenses/LICENSE-2.0.html" rel="external nofollow"
                target="_blank">Apache License 2.0</a> 许可协议。转载请注明出处！
            </li>
          </ul>
        </div>
        
    <footer class="article-footer">
      
          
<div class="share-btn">
      <span class="share-sns share-outer">
        <i class="ri-share-forward-line"></i>
        分享
      </span>
      <div class="share-wrap">
        <i class="arrow"></i>
        <div class="share-icons">
          
          <a class="weibo share-sns" href="javascript:;" data-type="weibo">
            <i class="ri-weibo-fill"></i>
          </a>
          <a class="weixin share-sns wxFab" href="javascript:;" data-type="weixin">
            <i class="ri-wechat-fill"></i>
          </a>
          <a class="qq share-sns" href="javascript:;" data-type="qq">
            <i class="ri-qq-fill"></i>
          </a>
          <a class="douban share-sns" href="javascript:;" data-type="douban">
            <i class="ri-douban-line"></i>
          </a>
          <!-- <a class="qzone share-sns" href="javascript:;" data-type="qzone">
            <i class="icon icon-qzone"></i>
          </a> -->
          
          <a class="facebook share-sns" href="javascript:;" data-type="facebook">
            <i class="ri-facebook-circle-fill"></i>
          </a>
          <a class="twitter share-sns" href="javascript:;" data-type="twitter">
            <i class="ri-twitter-fill"></i>
          </a>
          <a class="google share-sns" href="javascript:;" data-type="google">
            <i class="ri-google-fill"></i>
          </a>
        </div>
      </div>
</div>

<div class="wx-share-modal">
    <a class="modal-close" href="javascript:;"><i class="ri-close-circle-line"></i></a>
    <p>扫一扫，分享到微信</p>
    <div class="wx-qrcode">
      <img src="//api.qrserver.com/v1/create-qr-code/?size=150x150&data=http://zhuuu.work/2020/02/08/personal_server/GitHub-hexo-%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/" alt="微信分享二维码">
    </div>
</div>

<div id="share-mask"></div>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Git/" rel="tag">Git</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/aliyun/" rel="tag">aliyun</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/hexo/" rel="tag">hexo</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/nodejs/" rel="tag">nodejs</a></li></ul>


    </footer>

  </div>

  
  
  <nav class="article-nav">
    
      <a href="/2020/02/10/JVM_Notes/JVM-09-%E7%B1%BB%E6%96%87%E4%BB%B6%E7%BB%93%E6%9E%84/" class="article-nav-link">
        <strong class="article-nav-caption">上一篇</strong>
        <div class="article-nav-title">
          
            JVM-09-类文件结构
          
        </div>
      </a>
    
    
      <a href="/2020/02/08/config/IDEA-%E9%85%8D%E7%BD%AE%E4%BC%98%E5%8C%96/" class="article-nav-link">
        <strong class="article-nav-caption">下一篇</strong>
        <div class="article-nav-title">IDEA:配置优化</div>
      </a>
    
  </nav>


  

  
  
<!-- valine评论 -->
<div id="vcomments-box">
    <div id="vcomments">
    </div>
</div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='https://cdn.jsdelivr.net/npm/valine@1.3.10/dist/Valine.min.js'></script>
<script>
    new Valine({
        el: '#vcomments',
        notify: false,
        verify: '',
        app_id: '',
        app_key: '',
        path: window.location.pathname,
        avatar: 'mp',
        placeholder: '给我的文章加点评论吧~',
        recordIP: true
    });
    const infoEle = document.querySelector('#vcomments .info');
    if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0) {
        infoEle.childNodes.forEach(function (item) {
            item.parentNode.removeChild(item);
        });
    }
</script>
<style>
    #vcomments-box {
        padding: 5px 30px;
    }

    @media screen and (max-width: 800px) {
        #vcomments-box {
            padding: 5px 0px;
        }
    }

    #vcomments-box #vcomments {
        background-color: #fff;
    }

    .v .vlist .vcard .vh {
        padding-right: 20px;
    }

    .v .vlist .vcard {
        padding-left: 10px;
    }
</style>

  

  
  
<div class="gitalk" id="gitalk-container"></div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1.5.0/dist/gitalk.css">


<script src="https://cdn.jsdelivr.net/npm/gitalk@1.5.0/dist/gitalk.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/blueimp-md5@2.10.0/js/md5.min.js"></script>

<script type="text/javascript">
  var gitalk = new Gitalk({
    clientID: 'db188ed8c86dc4b0dbf3',
    clientSecret: 'a58f92160e5a9efd726b7d533000a0737f3e3f3e',
    repo: 'Blog-comments',
    owner: 'Zhuuuuuuuu',
    admin: ['Zhuuuuuuuu'],
    // id: location.pathname,      // Ensure uniqueness and length less than 50
    id: md5(location.pathname),
    distractionFreeMode: false,  // Facebook-like distraction free mode
    pagerDirection: 'last'
  })

  gitalk.render('gitalk-container')
</script>

  

</article>
</section>
      <footer class="footer">
  <div class="outer">
    <ul class="list-inline">
      <li>
        &copy;
        2019-2021
        Zhuuu
      </li>
      <li>
        
      </li>
    </ul>
    <ul class="list-inline">
      <li>
        
        
        <span>
  <i>PV:<span id="busuanzi_value_page_pv"></span></i>
  <i>UV:<span id="busuanzi_value_site_uv"></span></i>
</span>
        
      </li>
      <li>
        <!-- cnzz统计 -->
        
        <script type="text/javascript" src='https://s9.cnzz.com/z_stat.php?id=1278069914&amp;web_id=1278069914'></script>
        
      </li>
    </ul>
  </div>
</footer>
    <div class="to_top">
        <div class="totop" id="totop">
  <i class="ri-arrow-up-line"></i>
</div>
      </div>
    </main>
      <aside class="sidebar">
        <button class="navbar-toggle"></button>
<nav class="navbar">
  
  <div class="logo">
    <a href="/"><img src="/images/ayer-side.svg" alt="朱酱酱的学习博客"></a>
  </div>
  
  <ul class="nav nav-main">
    
    <li class="nav-item">
      <a class="nav-item-link" href="/">主页</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags">标签</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags/JVM/">JVM</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags/JDK%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90/">JDK源码</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags/%E5%A4%9A%E7%BA%BF%E7%A8%8B/">多线程</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags/Mysql/">Mysql</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags/Redis/">Redis</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags/%E8%AE%BE%E8%AE%A1%E8%80%85%E6%A8%A1%E5%BC%8F/">设计模式</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags/MyBatis/">MyBatis</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags/SpringMVC/">SpringMVC</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags/Spring/">Spring</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags/SpringBoot/">SpringBoot</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/">Linux</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags/Leetcode/">Leetcode</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags/%E5%89%8D%E7%AB%AF/">前端</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags/%E7%BD%91%E7%BB%9C%E7%BC%96%E7%A8%8B/">网络编程</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags/photoshop/">photoshop</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="http://smartzhuuu.lofter.com/" target="_blank" rel="noopener">摄影</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/2020/about">关于我</a>
    </li>
    
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      
      <a class="nav-item-link nav-item-search"  title="Search">
        <i class="ri-search-line"></i>
      </a>
      
      
      <a class="nav-item-link" target="_blank" href="/atom.xml" title="RSS Feed">
        <i class="ri-rss-line"></i>
      </a>
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
      </aside>
      <div id="mask"></div>

<!-- #reward -->
<div id="reward">
  <span class="close"><i class="ri-close-line"></i></span>
  <p class="reward-p"><i class="ri-cup-line"></i>请我喝杯咖啡吧~</p>
  <div class="reward-box">
    
    <div class="reward-item">
      <img class="reward-img" src="/images/alipay.jpg">
      <span class="reward-type">支付宝</span>
    </div>
    
    
    <div class="reward-item">
      <img class="reward-img" src="/images/wechat.jpg">
      <span class="reward-type">微信</span>
    </div>
    
  </div>
</div>
      
<script src="/js/jquery-2.0.3.min.js"></script>


<script src="/js/jquery.justifiedGallery.min.js"></script>


<script src="/js/lazyload.min.js"></script>


<script src="/js/busuanzi-2.3.pure.min.js"></script>


<script src="/js/share.js"></script>



<script src="/fancybox/jquery.fancybox.min.js"></script>




<script>
  try {
    var typed = new Typed("#subtitle", {
    strings: ['昨夜西风凋碧树。独上高楼，望尽天涯路','衣带渐宽终不悔，为伊消得人憔悴。','众里寻他千百度。蓦然回首，那人却在，灯火阑珊处。'],
    startDelay: 0,
    typeSpeed: 200,
    loop: true,
    backSpeed: 100,
    showCursor: true
    });
  } catch (err) {
  }
  
</script>




<script src="/js/tocbot.min.js"></script>

<script>
  // Tocbot_v4.7.0  http://tscanlin.github.io/tocbot/
  tocbot.init({
    tocSelector: '.tocbot',
    contentSelector: '.article-entry',
    headingSelector: 'h1, h2, h3, h4, h5, h6',
    hasInnerContainers: true,
    scrollSmooth: true,
    scrollContainer:'main',
    positionFixedSelector: '.tocbot',
    positionFixedClass: 'is-position-fixed',
    fixedSidebarOffset: 'auto',
    onClick: (e) => {
      $('.toc-link').removeClass('is-active-link');
      $(`a[href=${e.target.hash}]`).addClass('is-active-link');
      $(e.target.hash).scrollIntoView();
      return false;
    }
  });
</script>


<script>
  var ayerConfig = {
    mathjax: true
  }
</script>


<script src="/js/ayer.js"></script>


<script src="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.css">


<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.css">
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"></script>

<script>
    function viewer_init() {
        let pswpElement = document.querySelectorAll('.pswp')[0];
        let $imgArr = document.querySelectorAll(('.article-entry img:not(.reward-img)'))

        $imgArr.forEach(($em, i) => {
            $em.onclick = () => {
                // slider展开状态
                // todo: 这样不好，后面改成状态
                if (document.querySelector('.left-col.show')) return
                let items = []
                $imgArr.forEach(($em2, i2) => {
                    let img = $em2.getAttribute('data-idx', i2)
                    let src = $em2.getAttribute('data-target') || $em2.getAttribute('src')
                    let title = $em2.getAttribute('alt')
                    // 获得原图尺寸
                    const image = new Image()
                    image.src = src
                    items.push({
                        src: src,
                        w: image.width || $em2.width,
                        h: image.height || $em2.height,
                        title: title
                    })
                })
                var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {
                    index: parseInt(i)
                });
                gallery.init()
            }
        })
    }
    viewer_init()
</script>



<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
      tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
          processEscapes: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
      }
  });

  MathJax.Hub.Queue(function() {
      var all = MathJax.Hub.getAllJax(), i;
      for(i=0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
      }
  });
</script>

<script src="https://cdn.jsdelivr.net/npm/mathjax@2.7.6/unpacked/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>


<script type="text/javascript" src="https://js.users.51.la/20544303.js"></script>
  </div>
</body>

</html>